<template>
  <!-- <ul class="p-panel p-border-1 zj-product-navs">
    <li class="clearfix" v-if="!disabled_params.includes('lb')">
      <div class="product-type float-left">项目：</div>
      <div class="float-left options">
        <button
          class="b-button text"
          v-for="(item, index) in product_json"
          :key="index"
          :class="{ active: params.lb === item.code }"
          @click="chooseXm(item, index)"
        >
          {{ item.title }}
        </button>
      </div>
    </li>
    <li class="clearfix" v-if="!disabled_params.includes('kmlb')">
      <div class="product-type float-left">科目：</div>
      <div class="float-left options">
        <button
          class="b-button text"
          v-for="(item, index) in subject_json"
          :key="index"
          :class="{ active: params.kmlb === item.code }"
          @click="choosekm(item, index)"
        >
          {{ item.title }}
        </button>
      </div>
    </li>
    <li
      class="clearfix"
      v-if="!disabled_params.includes('genre') && $route.path != '/all_course'"
    >
      <div class="product-type float-left">类型：</div>
      <div class="float-left options">
        <button
          class="b-button text"
          v-for="(item, index) in remote_genre_json || genre_json"
          :key="index"
          :class="{ active: params.genre === item.code }"
          @click="lxItem(item, index)"
        >
          {{ item.title }}
        </button>
      </div>
    </li>
  </ul> -->
  <ul class="chooseul">
    <li class="chooseli" v-if="!disabled_params.includes('lb') && icode !== 3">
      <div class="choostle">项目</div>
      <div
        :class="{
          chooscont: $route.path !== '/xxcenter/myHistory',
          chooscont1: $route.path == '/xxcenter/myHistory',
        }"
      >
        <button
          class="b-button text"
          v-for="(item, index) in product_json"
          :key="index"
          :class="{ active: params.lb === item.code }"
          @click="chooseXm(item, index)"
        >
          {{ item.title }}
        </button>
      </div>
    </li>

    <li v-if="!disabled_params.includes('kmlb') && icode !== 3">
      <img src="./img/line@2x.png" style="width: 100%" alt="" />
    </li>

    <li
      class="chooseli"
      v-if="!disabled_params.includes('kmlb') && icode !== 3"
    >
      <div class="choostle">科目</div>
      <div class="chooscont">
        <button
          class="b-button text"
          v-for="(item, index) in subject_json"
          :key="index"
          :class="{ active: params.kmlb === item.code }"
          @click="choosekm(item, index)"
        >
          {{ item.title }}
        </button>
      </div>
    </li>

    <li v-if="$route.path !== '/xxcenter/myHistory' && icode !== 3">
      <img src="./img/line@2x.png" style="width: 100%" alt="" />
    </li>

    <li
      class="chooseli"
      v-if="!disabled_params.includes('kmlb') && icode !== 3"
    >
      <div class="choostle">筛选</div>
      <div class="chooscont">
        <button
          class="b-button text"
          :class="{ active: params.sort == 'new' }"
          @click="sorts('new')"
        >
          最新
        </button>
        <button
          @click="sorts('hots')"
          class="b-button text"
          :class="{ active: params.sort == 'hots' }"
        >
          最热
        </button>
      </div>
    </li>

    <li
      class="chooselx"
      v-if="!disabled_params.includes('genre') && $route.path != '/all_course'"
    >
      <div class="chooselxtlecont">
        <div
          class="kmdiv"
          v-for="(item, index) in remote_genre_json || genre_json"
          :key="index"
          :class="{
            active: index == icode,
            active1: icode == 0,
            active2: icode == 1,
            active3: icode == 2,
            active4: icode == 3,
            active5: icode == 4,
            active6: icode == 5,
          }"
          @click="lxItem(item, index)"
        >
          <div
            class="topyu"
            :class="[
              index == 0
                ? 'one'
                : index == 1
                ? 'two'
                : index == 2
                ? 'thr'
                : index == 3
                ? 'four'
                : index == 4
                ? 'fiv'
                : 'six',
            ]"
          ></div>

          <span>{{ item.title }}</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  props: {
    sort: {
      type: String,
    },
    mode: {
      type: String, //course, paper
      required: true,
    },
    params: {
      type: Object,
    },
    disabled_params: {
      type: Array,
      default: () => [],
    },
    disabled_products: {
      type: Array,
    },
    remote_genre_json: { type: Array },
  },
  data() {
    return {
      icode: 0,
      product_json: null,
      subject_json: null,
      all_subject_json: null,
      genre_json: null,
      all_list: null,
      obj: {
        lb_id: "",
        kmlb: "",
        token: this.$store.state.$user.token,
        page: 1,
      },
      km_json: [],
    };
  },
  methods: {
    ...mapMutations(["changeKm"]),

    sorts(lx) {
      this.$emit("sorts", lx);
    },

    // // 智能练习总数
    // znStTotal() {
    //   let obj = {
    //     token: this.$store.state.$user.token,
    //     xmlb_id: this.params.lb,
    //     kmlb: this.params.kmlb,
    //   };
    //   this.$api.paper.znStTotal(obj).then((res) => {
    //   });
    // },

   

    // 选类型
    lxItem(item, index) {
      this.icode = index;
      this.params.genre = item.code;
      if (index == 5) {
        this.params.kmlb = this.subject_json[1].code;
      }
      if (index == 3) {
        // this.tkDaily();
      }
    },
    // 选科目
    choosekm(item) {
      this.obj.kmlb = item.code;

      this.params.kmlb = item.code;

    },
    // 选项目
    chooseXm(item, index) {

      console.log(item)

      this.params.lb = item.code;

      this.params.kmlb = "";

      this.params.genre = "";

      this.icode = 0;

      let arr = [this.all_list[index]];

      this.obj.lb_id = this.all_list[index].projectid;

      const product_json = [];

      const all_subject_json = {};

      arr.map((v) => {
        v.title = v.project;

        v.code = v.projectid;

        product_json.push({ title: v.project, code: v.projectid });

        const subject_json = (all_subject_json[v.projectid] = []);

        v.kmlb.map((vv) => {
          vv.title = vv.major;

          vv.code = vv.majorid;

          if (vv == "") return; //fix 后台全部会变成空数组

          subject_json.push({ title: vv.major, code: vv.majorid });
        });
      });
      //默认一个项目 , 并且判断 lb 是否合法
      if (!this.params.lb || !all_subject_json[this.params.lb])
        this.params.lb = product_json[0].code;

      this.all_subject_json = all_subject_json;

      this.init_subject_json();
    },

    // 获取项目
    init_zj_product_json() {
      this.$api.paper

        .selectxmlb({ token: this.$store.state.$user.token })

        .then((rst) => {
          if (rst.data.event !== "100") return;

          this.all_list = rst.data.list;
          //项目
          const product_json = [];

          const all_subject_json = {};

          rst.data.list.map((v) => {
            v.kmlb.unshift({ major: "全部", majorid: "" });

            v.title = v.project;

            v.code = v.projectid;

            product_json.push({ title: v.project, code: v.projectid });

            const subject_json = (all_subject_json[v.projectid] = []);

            v.kmlb.map((vv) => {
              if (vv == "") return; //fix 后台全部会变成空数组

              vv.title = vv.major;

              vv.code = vv.majorid;

              subject_json.push({ title: vv.major, code: vv.majorid });
            });
          });

          //默认一个项目 , 并且判断 lb 是否合法

          if (!this.params.lb || !all_subject_json[this.params.lb])
            this.params.lb = product_json[0].code;

          this.product_json = product_json;

          this.all_subject_json = all_subject_json;

          this.init_subject_json();
        });
    },

    // 添加全部
    init_subject_json() {
      const subject_json = [];

      if (this.params.lb) {
        subject_json.push(...this.all_subject_json[this.params.lb]);
      } else {
        this.all_subject_json.each2((v) => {
          subject_json.push(...v);
        });
      }

      // //默认一个项目 , 并且判断 lb 是否合法

      this.subject_json = subject_json;

      sessionStorage.setItem("km_json", JSON.stringify(subject_json));
    },

    // 类型
    init_genre_json() {
      const genre_json = [{ title: "全部", code: "" }];
      switch (this.mode) {
        case "paper":
          genre_json.push(
            { title: "历年真题", code: "历年真题" },
            { title: "模拟试卷", code: "模拟试卷" },
            { title: "每日一练", code: "每日一练" },
            { title: "智能练习", code: "智能练习" },
            { title: "章节练习", code: "章节练习" }
          );
          this.genre_json = genre_json;
          break;
      }
    },
    mouseenter(index) {
      console.log(index, "mouseover");
    },
    mouseleave(index) {
      console.log(index, "mouseleave");
    },
  },
  watch: {
    // km_json: {
    //   deep: true,
    //   handler() {
    //     sessionStorage.setItem()
    //     this.changeKm(this.km_json);
    //   },
    // },
    params: {
      deep: true,
      handler() {
        console.log(this.params, "this.params---99999");
        sessionStorage.setItem("lb_id",this.params.lb)
        this.$emit("on-params-change", this.params);
      },
    },
  },

  created() {
    this.init_zj_product_json();
    this.init_genre_json();
  },
};
</script>

<style scoped lang="scss">
.chooseul {
  width: 1240px;
  // height: 121px;

  background: #f6f7fc;
  border: 1px solid #e3e3e3;
  li {
    background: #ffffff;
  }
  .chooselx {
    
    .chooselxtlecont {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .kmdiv {
        cursor: pointer;
        width: 180px;
        height: 110px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .topyu {
          width: 40px;
          height: 40px;
        }
        .one {
          background: url("./img/ic_tiku_qbst_defaul@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
        .two {
          background: url("./img/ic_tiku_lnzt_defaul@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
        .thr {
          background: url("./img/ic_tiku_mnsj_defaul@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
        .four {
          background: url("./img/ic_tiku_mryl_defaul@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
        .fiv {
          background: url("./img/ic_tiku_znlx_defaul@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
        .six {
          background: url("./img/ic_tiku_zjlx_defaul@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
        span {
          margin-top: 12px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 20px;
        }
        &:hover {
          span {
            color: #ff6900;
          }
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
          border-bottom: 3px solid #ff6900;
          box-sizing: border-box;
          div {
            margin-top: 3px;
          }
          .one {
            background: url("./img/ic_tiku_qbst_pressed@2x.png") center center
              no-repeat;
            background-size: 30px 32px;
          }
          .two {
            background: url("./img/ic_tiku_lnzt_pressed@2x.png") center center
              no-repeat;
            background-size: 30px 32px;
          }
          .thr {
            background: url("./img/ic_tiku_mnsj_pressed@2x.png") center center
              no-repeat;
            background-size: 30px 32px;
          }
          .four {
            background: url("./img/ic_tiku_mryl_pressed@2x.png") center center
              no-repeat;
            background-size: 30px 32px;
          }
          .fiv {
            background: url("./img/ic_tiku_znlx_pressed@2x.png") center center
              no-repeat;
            background-size: 30px 32px;
          }
          .six {
            background: url("./img/ic_tiku_zjlx_pressed@2x.png") center center
              no-repeat;
            background-size: 30px 32px;
          }
        }
      }
      .active {
        span {
          color: #ff6900;
        }
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
        border-bottom: 3px solid #ff6900;
        box-sizing: border-box;
        div {
          margin-top: 3px;
        }
      }
      .active1 {
        .one {
          background: url("./img/ic_tiku_qbst_pressed@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
      }
      .active2 {
        .two {
          background: url("./img/ic_tiku_lnzt_pressed@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
      }
      .active3 {
        .thr {
          background: url("./img/ic_tiku_mnsj_pressed@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
      }
      .active4 {
        .four {
          background: url("./img/ic_tiku_mryl_pressed@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
      }
      .active5 {
        .fiv {
          background: url("./img/ic_tiku_znlx_pressed@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
      }
      .active6 {
        .six {
          background: url("./img/ic_tiku_zjlx_pressed@2x.png") center center
            no-repeat;
          background-size: 30px 32px;
        }
      }
    }
    margin-top: 10px;
  }
  .chooseli {
    padding-left: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .choostle {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 20px;
      margin-right: 50px;
    }
    .chooscont1 {
      width: 824px;
      // flex: 1;
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;

      button {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
        &:hover {
          color: #f64c0f;
        }
      }
      button:not(:first-child) {
        margin-left: 15px;
      }
      button.active {
        color: #f64c0f;
      }
    }
    .chooscont {
      flex: 1;
      padding: 20px 0;

      button {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        &:hover {
          color: #f64c0f;
        }
      }
      button:not(:first-child) {
        margin-left: 30px;
      }
      button.active {
        color: #f64c0f;
      }
    }
  }
}

.zj-product-navs {
  padding: 3px 20px;
  li {
    padding-left: 50px;

    &:not(:last-child) {
      .options {
        border-bottom: 1px dashed #e8e8e8;
      }
    }
    .product-type {
      margin-left: -50px;
      margin-top: 15px;
      font-size: 14px;
      font-weight: bold;
    }
    .options {
      padding: 10px 0;
      width: 100%;
    }
  }
}
</style>
